<template>
  <a-sub-menu key="sub1">
    <template #title
      >实时路况<down-outlined
        :style="{ fontSize: '14px', color: '#08c', padding: '5px' }"
    /></template>
    <a-menu-item key="1" @click="showRoad">显示路况</a-menu-item>
    <a-menu-item key="2" @click="closeRoad">关闭路况</a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="sub2">
    <template #title
      >事故多发地<down-outlined
        :style="{ fontSize: '14px', color: '#08c', padding: '5px' }"
    /></template>
    <a-menu-item key="3" @click="showHotMap">显示热力图</a-menu-item>
    <a-menu-item key="4" @click="closeHotMap">关闭热力图</a-menu-item>
  </a-sub-menu>
  <a-sub-menu key="sub3">
    <template #title>
      工具箱<down-outlined
        :style="{ fontSize: '14px', color: '#08c', padding: '5px' }"
      />
    </template>
    <a-menu-item key="4" @click="addLength">测量距离</a-menu-item>
    <a-menu-item key="5" @click="addArea">测量面积</a-menu-item>
    <a-menu-item key="6" @click="remove">关闭测量</a-menu-item>
    <a-menu-item key="7" @click="saveImg">导出图片</a-menu-item>
  </a-sub-menu>
</template>
<script setup>
import mitt from '@/mitt'
import { DownOutlined } from '@ant-design/icons-vue'
const showRoad = () => {
  mitt.emit('showRoad')
}
const remove = () => {
  mitt.emit('remove')
}
const closeRoad = () => {
  mitt.emit('closeRoad')
}
const showHotMap = () => {
  mitt.emit('showHotMap')
}
const closeHotMap = () => {
  mitt.emit('closeHotMap')
}
const addLength = () => {
  mitt.emit('addlength')
}
const addArea = () => {
  mitt.emit('addarea')
}
const saveImg = () => {
  mitt.emit('saveimg')
}
</script>

<style></style>
